<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>视觉碎片1</title>
    <link rel="stylesheet" href="../css/碎片.css" />
  </head>
  <body>
    <!-- 全屏固定背景视频 -->
    <div class="background-video">
      <video autoplay muted loop playsinline class="bg-video">
        <source src="../videos/首页视频.mp4" type="video/mp4" />
        <img src="../images/首页背景.jpg" alt="背景图备用" />
      </video>
    </div>

    <!-- 中间纯白内容容器 -->
    <div class="content-container">
      <div class="container">
        <!-- 标题 -->
        <div class="title-container">
          <!-- 返回按钮（小正方形图片，左侧留间距） -->
          <div class="back-btn">
            <img src="../images/返回.png" alt="返回上一页" class="back-img" />
          </div>
          <!-- 标题 -->
          <h1 class="page-title">视觉碎片3</h1>
        </div>

        <!-- 内容区域：图片 + 文字描述 -->
        <div class="content">
          <div class="image-container">
            <img src="../images/双子塔.png" alt="双子塔" class="square-image" />
          </div>
          <div class="text-content">
            <h2>双子塔的巍峨雄姿</h2>
            <p>拍一张双子塔的照片吧！</p>
          </div>
        </div>

        <!-- 上传区域：上传按钮（正方形）+ 上传后图片容器（自适应） -->
        <div class="upload-wrapper">
          <!-- 正方形上传按钮（初始显示） -->
          <div class="upload-image-btn" id="uploadButton">
            <img
              src="../images/上传图片.png"
              alt="点击上传"
              class="upload-btn-img"
            />
          </div>

          <!-- 上传后的图片容器（初始隐藏，按原图比例显示） -->
          <div id="uploadedImageContainer" class="uploaded-image-container">
            <img id="uploadedImage" class="uploaded-img" alt="上传的图片" />
          </div>
        </div>

        <!-- 隐藏的文件选择器 -->
        <input
          type="file"
          id="fileInput"
          accept="image/*"
          style="display: none"
        />

        <!-- 确定按钮 -->
        <div class="confirm-container">
          <button id="confirmBtn" class="confirm-btn" disabled>确定</button>
        </div>
      </div>
    </div>

    <script src="../js/视觉碎片.js"></script>
  </body>
</html>
